import axios from 'axios';
import '../../styles/BarChart.scss'
import React,{useEffect,useState} from 'react';
import * as echarts from 'echarts';
import {barchart_list} from '../../utils/api'
interface Props{

}
function BarChart(props:Props) {
    var [xaxis,setXaxis] = useState();
    var [series, setSeries] = useState();

    const categories = (function () {
      let now = new Date();
      let res = [];
      let len = 5;
      while (len--) {
        res.unshift(now.toLocaleTimeString().replace(/^\D*/, ''));
        now = new Date(+now);
      }
      return res;
    })();
    const data = (function () {
      let res = [];
      let len = 10;
      while (len--) {
        res.push(Math.round(Math.random() * 10));
      }
      return res;
    })();
    useEffect(()=>{
        barchart_list().then((res)=>{
            // console.log(res.data)
            setXaxis(res.data.xAxis);
            setSeries(res.data.series.data);
        })
        // axios.get('/barchart').then((res)=>{
        //     console.log(res.data);
            
        // })
       
    },[])
    useEffect(()=>{
      type EChartsOption = echarts.EChartsOption;

      var chartDom = document.getElementById('barchart')!;
      var myChart = echarts.init(chartDom);
      var option: EChartsOption;

      option = {
          title:{
              text:'实时挂号预约情况'
          },
          textStyle:{
              fontSize:12,
              fontWeight:"normal",
          },
          xAxis: {
            type: 'category',
            data: categories
          },
          yAxis: {
            type: 'value'
          },
          series: [
            {
              type: 'bar',
              data: data,
              // showBackground:true,
              color: {
                  type: 'linear',
                  x: 0, //右
                  y: 0, //下
                  x2: 0, //左
                  y2: 1, //上
                  colorStops: [
                    {
                      offset: 0,
                      color: '#0872FF' // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      color: '#fff' // 100% 处的颜色
                    }
                  ]
                },
                backgroundStyle:{
                  // borderRadius:20
                },
                barWidth:15,
                itemStyle:{
                  borderRadius:[20],
                },
                label:{ //设置数据标签的位置,格式化
                  show:true,position:'top',formatter:series
                },
            }
          ]
        };

        
      setInterval(function () {
        let axisData = new Date().toLocaleTimeString().replace(/^\D*/, '');
        data.shift();
        data.push(Math.round(Math.random() * 10));

        categories.shift();
        categories.push(axisData);
        // categories.push(series);
        myChart.setOption({
          xAxis: [
            {
              data: categories
            },
          ],
          series: [
            {
              data: data
            },
          ]
        });
      }, 3000);
          
          option && myChart.setOption(option);
          
    })
    return (
        <div id='barchart' >
            
        </div>
    );
}

export default BarChart;